﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <title th:text="世界聊天"></title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="WAP游戏,文字游戏,怀旧,mud">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telphone=no,email=no">
    <meta name="misapplication-tap-highlight" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/modules/mojie/mojie.css}"/>
    <!--<link rel="stylesheet" type="text/javascript" th:href="@{/assets/modules/mojie/jquery-1.6.2.min.js}" />-->
    　
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<p style="color: blue">首页>世界</p>
<p>每次发言消耗一个喇叭(最大25个字)(功能未开发)
<input id="talk" type="text" maxlength="25"/></p><input id="btn" type="button" value="发言"/>(暂未完善)
<br/>
<ul th:if="${not #lists.isEmpty(chats)}" th:each="chat : ${chats}">
    [<span th:text="${chat.getTalkTime()}"></span>]<a th:href="@{infoOther(roleId=${chat.getTalkId()})}"><span th:text="${chat.getTalkName()}">说</span></a>
    <span th:text="${chat.getTalkContent()}"></span>
</ul>
<nav class="page-navigate-bar">
    <a th:href="@{game(cmd=scene)}" title="">返回游戏</a>
</nav>
<div class="block-container">
    <br>WAP报时:<span th:text="${timeNow}"></span>
</div>
</body>
</html>
<script>
    $("#btn").click(function () {
        var talk = $("#talk").val();
        $.post("chatSend", {"talk": talk}, function (data) {
                $.cookie("total", 30);
                location.reload();
        })
    })

    $(function () {
        if ($.cookie("total") != undefined && $.cookie("total") != 'NaN' && $.cookie("total") != 'null') {//cookie存在倒计时
            timekeeping();
        } else {//cookie 没有倒计时
            $('#btn').attr("disabled", false);
        }


        function timekeeping() {
            //把按钮设置为不可以点击
            $('#btn').attr("disabled", true);
            var interval = setInterval(function () {//每秒读取一次cookie
                //从cookie 中读取剩余倒计时
                total = $.cookie("total");
                //在发送按钮显示剩余倒计时
                $('#btn').val('请等待' + total + '秒');
                //把剩余总倒计时减掉1
                total--;
                if (total == 0) {//剩余倒计时为零，则显示 发送，可点击
                    //清除定时器
                    clearInterval(interval);
                    //删除cookie
                    total = $.cookie("total", total, {expires: -1});
                    //显示发送
                    $('#btn').val('发送');
                    //把发送按钮设置为可点击
                    $('#btn').attr("disabled", false);
                } else {//剩余倒计时不为零
                    //重新写入总倒计时
                    $.cookie("total", total);
                }
            }, 1000);
        }
    })


</script>